
<template>
  <div class="skuDetail">
    <el-dialog title="sku列表" :visible.sync="dialogTableVisible" width="65%">
      <el-button type="primary" @click="addNew">新增</el-button>
      <el-table v-loading="loading" :data="skulist">
        <el-table-column type="index" label="#" width="50" align="center" />
        <el-table-column label="图片" width="120">
          <template slot-scope="scope">
            <el-upload
              class="avatar-uploader"
              :action="action"
              :headers="Headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              @click.native="getcurrentrow(scope.row)"
            >
              <img v-if="scope.row.pic" :src="scope.row.pic" style="width:100px;height:100px">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>

          </template>
        </el-table-column>
        <el-table-column label="颜色" width="160" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.spData[0].value" size="mini" />
          </template>
        </el-table-column>
        <el-table-column label="大小" width="160" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.spData[1].value" size="mini" />
          </template>
        </el-table-column>
        <el-table-column label="库存" width="160" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stock" size="mini" />
          </template>
        </el-table-column>
        <el-table-column label="预警库存" width="160" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.lowStock" size="mini" placeholder="预警库存" />
          </template>
        </el-table-column>
        <el-table-column label="锁定库存" width="160" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.lockStock" size="mini" />
          </template>
        </el-table-column>
        <el-table-column label="sku编码" width="160" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.skuCode" size="mini" placeholder="自定义sku编码" />
          </template>
        </el-table-column>
        <el-table-column label="价格" width="160" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" size="mini" placeholder="价格" />
          </template>
        </el-table-column>
        <el-table-column label="销量" width="160" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sale" size="mini" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.id">
              <el-button type="text" style="color:#f00" size="mini" @click="delSku(scope.row)">删除</el-button>
              <el-button type="text" style="color:#409eff" size="mini" @click="editSku(scope.row)">修改编辑</el-button>
            </span>
            <span v-else>
              <el-button type="text" style="color:#f00" size="mini" @click="delNewSku(scope.$index)">删除</el-button>
              <el-button type="text" style="color:#409eff" size="mini" @click="saveNewSku(scope.row)">保存</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/utils/myAuth'
import { productSkusDetail, delSku, updateSkuInfo, addProductSkus } from '@/api/product/product'
export default {
  data() {
    return {
      id: '',
      dialogTableVisible: false,
      loading: false,
      skulist: [],
      action: '/lejuAdmin/material/uploadFileOss',
      currentdata: []// 选中当前行数据
    }
  },
  computed: {
    Headers() {
      const token = getToken()
      return { token }
    }
  },
  created() {
  },
  methods: {
    open(id) {
      this.id = id
      this.dialogTableVisible = true
      this.getDetail()
    },
    getDetail() {
      this.loading = true
      this.skulist = []
      productSkusDetail(this.id).then(res => {
        res.data.skus.forEach(item => {
          this.skulist.push({
            ...item,
            spData: JSON.parse(item.spData)
          })
        })
      })
      this.loading = false
    },
    getcurrentrow(val) {
      this.currentdata = val
    },
    handleAvatarSuccess(res, file) {
      if (res.success) {
        this.currentdata.pic = res.data.fileUrl
      }
    },
    // 新增
    addNew() {
      var obj = {
        productId: this.id,
        lockStock: '',
        lowStock: '',
        pic: '',
        price: '',
        sale: '',
        skuCode: '',
        stock: '',
        spData: [{ 'key': '颜色', 'value': '' }, { 'key': '容量', 'value': '' }]
      }
      this.skulist.push(obj)
    },
    // 删除
    delSku(val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delSku(val.id).then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            this.getDetail()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delNewSku(val) {
      this.skulist.splice(val, 1)
    },
    editSku(val) {
      var obj = {
        id: val.id,
        lockStock: val.lockStock,
        lowStock: val.lowStock,
        pic: val.pic,
        price: val.price,
        productId: val.productId,
        sale: val.sale,
        skuCode: val.skuCode,
        stock: val.stock,
        spData: JSON.stringify(val.spData)
      }
      updateSkuInfo(obj).then(res => {
        if (res.success) {
          this.$message.success('编辑成功')
        } else {
          this.$message.error('编辑失败')
        }
      })
    },
    saveNewSku(val) {
      addProductSkus({
        ...val,
        spData: JSON.stringify(val.spData)
      }).then(res => {
        if (res.success) {
          this.$message.success('新增成功')
        } else {
          this.$message.error('新增失败')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
